<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WindiCSS Playground</title>
    <link rel="stylesheet" href="windi.css" />
  </head>

  <body
    class="
      bg-windi-dark
      flex flex-col
      min-h-screen
      space-y-12
      items-center
      justify-center
    "
  >
    <div class="flex flex-col space-y-2 items-center justify-center">
      <img src="https://windicss.org/assets/logo.svg" alt="WindiCSS logo" />
      <h1 class="font-bold text-center text-3xl text-gray-100 md:text-5xl">
        Windi CSS
      </h1>
      <h2 class="text-center text-xl text-gray-300 md:text-2xl">
        Next generation utility-first CSS framework.
      </h2>
    </div>
    <a
      href="https://windicss.org/guide/"
      class="
        bg-transparent
        border-windi-blue
        rounded-lg
        border-2
        text-lg text-windi-blue
        py-2
        px-8
        transition-colors
        md:py-3
        hover:bg-windi-blue hover:text-black
      "
    >
      Guide
    </a>
  </body>
</html>
